<script setup>
import { ref, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import { getGoodsSuppliers } from "../../../api/goods";

const props = defineProps({
  modelValue: {
    type: [Number, String, null],
    default: null,
  },
  placeholder: {
    type: String,
    default: "请选择供应商",
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  filterable: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  showAllStatus: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue", "loaded"]);

const loading = ref(false);
const allSupplierOptions = ref([]);

const displayedSupplierOptions = computed(() => {
  if (props.showAllStatus) {
    return allSupplierOptions.value;
  }
  return allSupplierOptions.value.filter((item) => item.status === 1);
});
// 加载供应商数据,格式化
async function loadSuppliers() {
  loading.value = true;
  try {
    const res = await getGoodsSuppliers();
    if (res.code === 0 && res.data && Array.isArray(res.data)) {
      const formattedList = res.data.map((item) => {
        let statusText = "";
        let statusClass = "supplier-status-active";

        if (item.status === 0) {
          statusText = " (已暂停合作)";
          statusClass = "supplier-status-paused";
        } else if (item.status === -1) {
          statusText = " (已废弃)";
          statusClass = "supplier-status-discarded";
        }

        const rating = item.rating_level ? ` | 评级: ${item.rating_level}` : "";
        const notes = item.notes ? ` | 备注: ${item.notes}` : "";
        const fullInfoLabel = `${item.id} - ${item.name}${statusText}${rating}${notes}`;

        return {
          ...item,
          displayName: item.name + statusText,
          fullInfoLabel: fullInfoLabel,
          statusClass: statusClass,
        };
      });

      allSupplierOptions.value = formattedList;
      emit("loaded", formattedList);
    } else if (res.code !== 0) {
      ElMessage.error(res.msg || "获取供应商列表失败");
    }
  } catch (error) {
    console.error("获取供应商列表失败:", error);
    ElMessage.error("获取供应商列表失败，请检查网络或后端服务");
  } finally {
    loading.value = false;
  }
}

const handleChange = (value) => {
  emit("update:modelValue", value);
};

onMounted(() => {
  loadSuppliers();
});
</script>

<template>
  <el-select
    :model-value="modelValue"
    @update:modelValue="handleChange"
    :placeholder="placeholder"
    :clearable="clearable"
    :filterable="filterable"
    :disabled="disabled"
    style="width: 100%"
    v-loading="loading"
  >
    <el-option
      v-for="item in displayedSupplierOptions"
      :key="item.id"
      :label="item.fullInfoLabel"
      :value="item.id"
    >
      <span
        :class="{ 'name-danger': item.status === 0 }"
        style="font-weight: 600"
      >
        <!-- {{ item.id }} -  -->
        {{ item.name }}</span
      >
      <span :class="item.statusClass" style="font-size: 12px; margin-left: 5px"
        >{{
          item.status === 0
            ? " (已暂停合作)"
            : item.status === -1
            ? " (已废弃)"
            : ""
        }}
      </span>
      <span style="color: #909399; font-size: 12px; margin-left: 5px"
        >{{ item.rating_level ? ` | 评级: ${item.rating_level}` : "" }}
        {{ item.notes ? ` | 备注: ${item.notes}` : "" }}
      </span>
    </el-option>
  </el-select>
</template>

<style scoped>
.name-danger {
  color: red;
}
.supplier-status-paused {
  color: orange;
}
.supplier-status-discarded {
  color: red;
}
</style>
